<template>
	<view class="sortDetails">
		<view class="tabs" >
			<van-tabs @click="getVideo">
				<van-tab v-for="item, i in sortList" :key="i" :title="item"></van-tab>
			</van-tabs>
		</view>
		<view class="videoList"><videoList :list="list" :isHide="isShow" /></view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import videoList from '@/components/videoList/videoList.vue'
import { cateChannelApi, cateChannel2Api } from '@/api/modules/sort.js'
import { reactive, toRefs } from 'vue'
const state = reactive({
	list: [],
	title: '',
	id: '',
	isShow: '',
	sortList: []
})

const getVideo = async (e) => {
	const res = await cateChannel2Api(state.id,e.detail.title)
	state.list = res.data
	console.log(res, e.detail.title);
}

const init = async () => {
	uni.setNavigationBarTitle({
		title: state.title
	})
	const { data } = await cateChannelApi(state.id)
	data.map(item => {
		item.playback = item.playback / 10000 >= 1 ? Math.round(item.playback / 10000) + '万' : item.playback
		item.barrage = item.barrage / 10000 >= 1 ? Math.round(item.barrage / 10000) + '万' : item.barrage
		let m = Math.floor(item.VideoLength / 60)
		let ss = item.VideoLength % 60
		m += ''
		ss += ''
		m = m.length == 1 ? '0' + m : m
		ss = ss.length == 1 ? '0' + ss : ss
		item.VideoLength = m + ':' + ss
	})
	state.list = data
	data.length ? (state.isShow = true) : (state.isShow = false)
	console.log(data)
	let arr = []
	state.list.forEach(item => {
		if(item.fl === null) return
		arr.push(item.fl)
	})
	arr.forEach(item => {
		if (!state.sortList.includes(item)) {
			state.sortList.push(item)
		}
	})
	console.log(state.sortList);
}

// 页面加载
onLoad(async message => {
	state.title = message.title
	state.id = message.id
	init()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})

const { list, title, id, isShow, sortList } = toRefs(state)
</script>

<style lang="scss">
.sortDetails {
	padding: 20rpx;
	.tabs {
		.van-tabs__line {
			display: none;
		}
		.van-tab--active {
			background-color: #f4f4f4;
			color: #f8aac0 !important;
			border-radius: 10rpx;
		}
	}
	.videoList {
		margin-top: 30rpx;
	}
}
</style>
